{extend name="main"}
{block name="style"}
<style type="text/css">
    html{background-image: url(__TEMPLATE_STATIC__/bg.png);height: 100%;background-repeat: no-repeat;background-size: 100% 100%;}
    body,#app{background-color:transparent;height: 100%;}
    #app{display: -webkit-box; -webkit-box-orient: vertical; -webkit-flex-flow: column; }
    .top-nav{background-color: #8DA5E2}
    .login-window{width: 740px;height: 460px;}
    .w-280px{width: 280px;background-color: #F8FCFF;color: #999999;}
    .text-BBBBBB{color: #BBBBBB}
    .login-tabs{width: 315px;}
</style>
{/block}
{block name="header"}
{include file="module/top_nav" container="container-xl"/}
{/block}
{block name="body"}
<div class="flex1 wrap h-100 flex-v-center">
    <div class="flex bg-white rounded-xl login-window overflow-hidden">
        <div class="p-4 w-280px">
            <img src="{xycms:web name='logo'}" alt="" class="w-75" style="max-height: 50px;">
            <div class="p-4">
                <div class="py-3 flex flex-center">
                    <div>
                        <img src="__TEMPLATE_STATIC__/icon/icon_login1.png" alt="" width="32" height="32">
                    </div>
                    <div class="pl-3">
                        <div class="h6">简历填写 · 便捷</div>
                        <div class="text-BBBBBB">简历是工作的敲门砖</div>
                    </div>
                </div>
                <div class="py-3 flex flex-center">
                    <div>
                        <img src="__TEMPLATE_STATIC__/icon/icon_login2.png" alt="" width="32" height="32">
                    </div>
                    <div class="pl-3">
                        <div class="h6">职位优选 · 全面</div>
                        <div class="text-BBBBBB">各大行业职位任你选</div>
                    </div>
                </div>
                <div class="py-3 flex flex-center">
                    <div>
                        <img src="__TEMPLATE_STATIC__/icon/icon_login3.png" alt="" width="32" height="32">
                    </div>
                    <div class="pl-3">
                        <div class="h6">职位投递 · 快速</div>
                        <div class="text-BBBBBB">在线职位及时投递</div>
                    </div>
                </div>
                <div class="py-3 flex flex-center">
                    <div>
                        <img src="__TEMPLATE_STATIC__/icon/icon_login4.png" alt="" width="32" height="32">
                    </div>
                    <div class="pl-3">
                        <div class="h6">投递反馈 · 高效</div>
                        <div class="text-BBBBBB">查看简历记录早知道</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-1 wrap h-100 flex-v-center px-3">
            <div>
                {include file="module/login_tabs"/}
                <div class="flex text-small text-secondary px-3"
                v-if="loginTabs.nav!='qrlogin'">
                    <div class="text-secondary">登录代表你已同意</div>
                    <div class="pl-2">
                        <a href="/article/content/user_agreement_web.html" class="el-link el-link--primary" target="_blank">《网页版服务协议》</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            view:XYBase.view,
            loginTabs:XYBase.loginTabs,
            feedback:XYBase.feedback,
            userInfo:UserInfo,
        },
        watch:{
            view:XYBase.viewWatch,
            loginTabs:XYBase.loginTabsWatch,
            userInfo:{
                handler(val,oldVal){
                    if (val.id) {
                        window.location.reload();
                    }
                },
                deep:true
            },
        },
        created(){
            XYBase.created(this);
        },
        methods:XYBase.methods({
        })
    });
</script>
{/block}